<template>
    <div>
        <Row>
            <Col span="2">
            <Button type="primary" icon="plus-round">新增海报</Button>
            </Col>
            <Col span="2">
            <Dropdown>
                <Button type="primary">
                    显示条数
                    <Icon type="arrow-down-b"></Icon>
                </Button>
                <DropdownMenu slot="list">
                    <DropdownItem>10</DropdownItem>
                    <DropdownItem>20</DropdownItem>
                    <DropdownItem>30</DropdownItem>
                </DropdownMenu>
            </Dropdown>
            </Col>
            <Col span="2">
            <Dropdown>
                <Button type="primary">
                    排序方式
                    <Icon type="arrow-down-b"></Icon>
                </Button>
                <DropdownMenu slot="list">
                    <DropdownItem>升序</DropdownItem>
                    <DropdownItem>降序</DropdownItem>
                </DropdownMenu>
            </Dropdown>
            </Col>
        </Row>
        <br/>
        <div>
            <Table border ref="selection" :columns="columns4" :data="data1"></Table>
            <Button @click="handleSelectAll(true)">全选</Button>
            <Button @click="handleSelectAll(false)">批量删除</Button>
        </div>
        <br/>
        <Row type="flex" justify="end">
            <Col span="12">
            <Page :total="100" show-elevator></Page>
            </Col>
        </Row>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                columns4: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: 'ID',
                        key: 'id'
                    },
                    {
                        title: '模板名称',
                        key: 'posterName'
                    },
                    {
                        title: '缩略图',
                        key: 'img'
                    },
                    {
                        title: '启动状态',
                        key: 'status',
                    },
                    {
                        title: '管理操作',
                        key: 'action',
                        align: 'left',
                        width: 200,
                        render: function (h, params) {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'success',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '12px'
                                    },
                                    on: {
                                        click: function () {
                                            alert(222)
                                        }
                                    }
                                }, '编辑'),
                                h('Button', {
                                    props: {
                                        type: 'info',
                                        size: 'small'
                                    },
                                    on: {
                                        click: function () {
                                            alert(3333)
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ],
                data1: [
                    {
                        id: '1',
                        posterName: '教育培训',
                        fieldType: '图片',
                        status: '0',
                    },
                    {
                        id: '2',
                        posterName: '教育培训',
                        fieldType: '图片',
                        status: '0',
                    },
                    {
                        id: '3',
                        posterName: '教育培训',
                        fieldType: '图片',
                        status: '0',
                    },
                    {
                        id: '4',
                        posterName: '教育培训',
                        fieldType: '图片',
                        status: '0',
                    }
                ]
            }
        },

    }
</script>
